<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <style>
        .active {
	    width: 100px;
	    height: 100px;
	    background: green;
        }
        .text-danger {
	    background: red;
        }
        .base {
        width: 100px;
        height: 100px;
        }

        .active2 {
         background: green;
        }
        .text-danger2 {
	    width: 100px;
	    height: 100px;
	    background: red;
        }
    </style>
</head>
<body>
    <div id="app">
        {{ message }}
        <button v-on:click="message='hello'">修改</button>
        <button v-on:click="updateText2">修改2</button>
        <button v-on:click="counter +=1">增加</button>
        <p>这个按钮被点击了{{counter}}次。</p>
        <ul>
            <li v-for="item in books">
                书名:{{item.name}} 作者:{{item.author}}
            </li>
        </ul>
    </div>
    <div id="jsApp">
    </div>
    <button onclick="updateText();">修改</button>
    <hr>
    <div id="app2">
        <p v-if="seen">现在你看到我了</p>
        <template v-if="ok">
        <h1>菜鸟教程</h1>
        <p>学的不仅是技术，更是梦想！</p>
        <p>哈哈哈，打字辛苦啊！！！</p>

        </template>
        <hr />
        <div v-if="Math.random() > 0.5">
         Sorry
        </div>
        <div v-else>
         Not sorry
        </div>
        <hr />
        <div v-if="type === 'A'">
            A
	    </div>
	    <div v-else-if="type === 'B'">
	        B
	    </div>
	    <div v-else-if="type === 'C'">
	         C
	    </div>
	    <div v-else>
	        Not A/B/C
	    </div>
        <hr />
        <h1 v-show="ok">Hello!</h1>
        <hr />
        <ul>
            <template v-for="site in sites">
            <li>{{ site.name }}</li>
            <li>--------------</li>
            </template>
        </ul>
        <hr />
        <ul>
            <li v-for="value in object">
                {{ value }}
            </li>
        </ul>
        <hr />
        <ul>
            <li v-for="(value, key) in object2">
                {{ key }} : {{ value }}
            </li>
        <hr />
        <ul>
        <li v-for="(value, key, index) in object3">
            {{ index }}. {{ key }} : {{ value }}
        </li>
        </ul>
        </ul>
        <hr />
        <ul>
            <li v-for="n in 10">
                {{ n }}
            </li>
        </ul>
        <hr />
        {{ message.split('').reverse().join('') }}
        <hr />
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
        <hr />
        <p>原始字符串: {{ message }}</p>
        <p>计算后反转字符串: {{ reversedMessage }}</p>
        <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
        <hr />
        <p>{{ site }}</p>
        <hr />
        <p style = "font-size:25px;">计数器: {{ counter }}</p>
        <button @click = "counter++" style = "font-size:25px;">点我</button>
        <hr />
        千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
        <hr />
        <div v-bind:class="{ 'active': isActive }"></div>
        <hr />
        <div class="static"
            v-bind:class="{ 'active': isActive, 'text-danger': hasError }">
        </div>
        <hr />
          <div v-bind:class="classObject"></div>
        <hr />
        <div v-bind:class="classObject"></div>
        <hr />
        <div v-bind:class="[activeClass, errorClass]"></div>
        <hr />
        <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
        <hr />
        <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程1</div>
        <hr />
        <div v-bind:style="styleObject">菜鸟教程2</div>
        <hr />
        <button v-on:click="greet">Greet</button>
        <hr />
        <button v-on:click="say('hi')">Say hi</button>
        <button v-on:click="say('what')">Say what</button>
        <hr />
        <p>单个复选框：</p>
        <input type="checkbox" id="checkbox" v-model="checked">
        <label for="checkbox">{{ checked }}</label>
        <p>多个复选框：</p>
        <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
        <label for="runoob">Runoob</label>
        <input type="checkbox" id="google" value="Google" v-model="checkedNames">
        <label for="google">Google</label>
        <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
        <label for="taobao">taobao</label>
        <br>
        <span>选择的值为: {{ checkedNames }}</span>
        <hr />
        <input type="radio" id="Radio1" value="Runoob" v-model="picked">
        <label for="runoob">Runoob</label>
        <br>
        <input type="radio" id="Radio2" value="Google" v-model="picked">
        <label for="google">Google</label>
        <br>
        <span>选中值为: {{ picked }}</span>
       <hr />
        <select v-model="selected" name="fruit">
        <option value="">选择一个网站</option>
        <option value="www.runoob.com">Runoob</option>
        <option value="www.google.com">Google</option>
        </select>

    </div>
    <p id="info"></p>
    <script>
        function updateText(){
            document.getElementById("jsApp").innerHTML = "文字被修改";
        }
        document.getElementById("jsApp").innerHTML = "hello vue";
        new Vue({
            el:'#app',

            data:{
                counter:0,
                message:'Hello Vue.js!',
                books:[{name:'钢铁是练成的1',author:'小李1'},
                        {name:'钢铁是练成的2',author:'小李2'},
                        {name:'钢铁是练成的3',author:'小李3'}]
            },
            methods:{
                updateText2(){
                    this.message="hello2";
                },
            }
        })
        new Vue({
            el:'#app2',
            data: {
                selected: '',
                picked : 'Runoob',
                checked : false,
                checkedNames: [],
                seen: true,
                ok: true,
                type: 'C',
                ok: true,
                sites: [
                { name: 'Runoob' },
                { name: 'Google' },
                { name: 'Taobao' }
                ],
                object: {
                    name1: '菜鸟教程1',
                    url1: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                },
                object2: {
                    name2: '菜鸟教程2',
                    url2: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                },
                object3: {
                    name3: '菜鸟教程3',
                    url3: 'http://www.runoob.com',
                    slogan: '学的不仅是技术，更是梦想！'
                },
                message: 'Runoob!',
                name: 'Google',
                url: 'http://www.google.com',
                counter: 1,
                kilometers : 0,
                meters:0,
                isActive: true,
                isActive: true,
                hasError: true,
                classObject: {
                    active: true,
                    'text-danger': true
                },
                isActive: true,
                error: {
                    value: true,
                    type: 'fatal'
                },
                activeClass: 'active',
                errorClass: 'text-danger',
                isActive: true,
                activeClass: 'active',
                errorClass: 'text-danger2',
                    activeColor: 'green',
                    fontSize: 30,
                styleObject: {
                color: 'green',
                fontSize: '30px',
                name: 'Vue.js',
                message3: '菜鸟教程\r\nhttp://www.runoob.com'
                

        }
            },
            methods: {
            },
            computed :{
            },
            watch : {
                kilometers:function(val) {
                    this.kilometers = val;
                    this.meters = this.kilometers * 1000
                },
                meters : function (val) {
                    this.kilometers = val/ 1000;
                    this.meters = val;
                }
            },
            computed: {
                // 计算属性的 getter
                reversedMessage: function () {
                    // `this` 指向 vm 实例
                    return this.message.split('').reverse().join('')
                },
                site: {
                    // getter
                    get: function () {
                        return this.name + ' ' + this.url
                    },
                    // setter
                    set: function (newValue) {
                        var names = newValue.split(' ')
                        this.name = names[0]
                        this.url = names[names.length - 1]
                    }
                },
                classObject: function () {
                    return {
                        base: true,
                        active2: this.isActive && !this.error.value,
                        'text-danger': this.error.value && this.error.type === 'fatal',
                    }
                }
            },

            methods: {
                reversedMessage2: function () {
                    return this.message.split('').reverse().join('')
                },
                greet: function (event) {
                    // `this` 在方法里指当前 Vue 实例
                    alert('Hello ' + this.name + '!')
                    // `event` 是原生 DOM 事件
                    if (event) {
                        alert(event.target.tagName)
                    }
                },
                say: function (message) {
                    alert(message)
                }
            }
        });
        vm.$watch('counter', function(nval, oval) {
            alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
        });
        vm.$watch('kilometers', function (newValue, oldValue) {
            // 这个回调将在 vm.kilometers 改变后调用
            document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
        });
        // 调用 setter， vm.name 和 vm.url 也会被对应更新
        vm.site = '菜鸟教程 http://www.runoob.com';
        document.write('name: ' + vm.name);
        document.write('<br>');
        document.write('url: ' + vm.url);
        app.greet() // -> 'Hello Vue.js!'
    </script>
</body>
</html>